<template>
  <div class="content">
     <div class="login">
         <img  class="img" src="../assets/images/login.png" alt="">
         <!-- <div class="text">手机登录</div> -->
         <input type="text" placeholder="用户名" class="t1">
         <input type="text" placeholder="请输入验证码" class="t2">
         <button class="login_btn" @click="goHome" :loading="isBtnLoading"> 登录</button>
     </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userName: "",
      password: "",
      isBtnLoading: false
    };
  },
  methods: {
    goHome() {
        this.$router.push({path:'/'})
    //   if (!this.userName) {
    //     this.$message.error("请输入用户名");
    //     return;
    //   }
    //   if (!this.password) {
    //     this.$message.error("请输入密码");
    //     return;
    //   }
    }
  }
};
</script>
<style  scoped>
@import url("../assets/font/iconfont.css");
.content {
  position: relative;
  min-height: 100%;
  background: url("../assets/images/floor.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.login {
  position: absolute;
  top: 15%;
  left: 10%;
  margin-right: 15%;
  margin-bottom: 15%;
  width: 63%;
  padding: 300px 75px 0px 75px;
  display: flex;
  flex-direction: column;
  height: 400px;
  background-color: #fff;
  border-radius: 15px;
}
.login .text{
/* width: 100px;
height: 30px;
margin-top: 100px;
background-color: red; */
}
.login img {
    width: 360px;
    height: 100%;
  position: absolute;
  right: 0;
  top: -1px;
  vertical-align: middle;
  display: table-cell;
}
.login input {
  outline: none;
margin-top: -250px;
  width: 400px;
  height: 55px;
  line-height: 55px;
  padding-left: 10px;
}
.login .t1::before{
content:'\e840';
font-family: "iconfont";
color: #f3a;
font-size: 30px;
}
.login .t2::before{
content:'\e624';
font-family: "iconfont"
}
.login .t2 {
  margin-top: 25px;
}
.login_btn {
  width: 410px;
  height: 55px;
  font-size: 16px;
  background: linear-gradient(to right, #f3a, #2154fa); /* 标准的语法 */
  filter: brightness(1.4);
  outline: none;
  margin-top: 50px;
}

* {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>
